<template>
  <div class="app-container">
    <div class="filter-container clearfix">
      <searchBar :show-channel-id="false" :show-server-id="false" @transferFilter="handleFilter" />
      <router-link v-if="checkPermission(permissionRoles.user_add)" to="/system/user/add" class="filter-item">
        <el-button type="primary">新增账号</el-button>
      </router-link>
    </div>

    <el-table v-loading="listLoading" :data="list" class="mt-15" border height="748">
      <el-table-column align="center" label="序号">
        <template slot-scope="scope">
          {{ scope.$index+1 }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="用户名">
        <template slot-scope="scope">
          {{ scope.row.username }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="昵称">
        <template slot-scope="scope">
          {{ scope.row.nickname }}
        </template>
      </el-table-column>
      <el-table-column align="header-center" label="所属角色">
        <template slot-scope="scope">
          {{ roleList[scope.row.role_id] ? roleList[scope.row.role_id].title : '' }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="最后登录时间">
        <template slot-scope="scope">
          {{ scope.row.updated_at }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="登录ip">
        <template slot-scope="scope">
          {{ scope.row.ip }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status > 0" type="success">正常</el-tag>
          <el-tag v-else type="danger">禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <router-link v-if="checkPermission(permissionRoles.user_edit)" :to="'/system/user/edit/' + scope.row.id">
            <el-button type="text" size="small">更新</el-button>
          </router-link>
          <el-button v-if="checkPermission(permissionRoles.user_del)" class="ml-10" type="text" size="small" @click="handleDelete(scope)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
import checkPermission from '@/utils/permission' // 权限判断函数
import { getUsers, deleteUser } from '@/api/user'
import { getUserRoles } from '@/api/role'
import SearchBar from '@/components/SearchBar'

export default {
  components: { SearchBar },
  data() {
    return {
      permissionRoles: this.$store.state.user.permissionRoles,
      listLoading: false,
      list: [],
      roleList: [],
      searchBarQuery: {}
    }
  },
  computed: {
  },
  created() {
    this.init()
  },
  methods: {
    checkPermission,
    init() {
      this.getList()
    },
    handleFilter(query) {
      this.searchBarQuery = query
      this.getList()
    },
    async getList() {
      this.listLoading = true
      this.getUserRoles()
      const res = await getUsers(this.searchBarQuery)
      this.listLoading = false
      this.list = res.data
    },
    async getUserRoles() {
      const res = await getUserRoles()
      this.roleList = res.data
    },
    handleDelete({ $index, row }) {
      this.$confirm('你确定要删除此角色吗?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          await deleteUser(row.id)
          this.list.splice($index, 1)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(err => { console.error(err) })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .roles-table {
    margin-top: 30px;
  }
}
</style>
